<template>
	<view>
		<nav-bar title="积分商品订单"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="order_info" v-if="checkedAddressData.objId" @click="onPageJump('/pages/my/address/addressList?isSelect=1')">
			<view class="order_infoaddress">
				<view>
					<view>{{ checkedAddressData.position }}</view>
					<text>{{ checkedAddressData.address }}</text>
				</view>
				<image src="../../static/icon/ic_to.png" mode="aspectFit"></image>
			</view>
			<view class="order_customer_info">
				<view>{{ checkedAddressData.receiveName }}</view>
				<text>{{ checkedAddressData.phone }}</text>
			</view>
		</view>
		<view class="order_info" v-else @click="onPageJump('/pages/my/address/addressList?isSelect=1')">
			<view class="order_infoaddress">
				<view>
					<view>请选择收货地址</view>
				</view>
				<image src="../../static/icon/ic_to.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="product_info">
			<image :src="dataInfo.headImgs && dataInfo.headImgs[0]" mode="aspectFill"></image>
			<view>
				<view class="name">{{dataInfo.name}}</view>
				<text class="setmeal">{{dataInfo.goodsSpecName}}</text>
				<view class="price_info">
					<view class="price">
						<text>{{dataInfo.goodsSpecIntegral}}</text>
						<view>积分</view>
					</view>
					<view class="amount">x{{goodsNum}}</view>
				</view>
			</view>
		</view>
		<view class="remarks_info">
			<text>备注</text>
			<textarea placeholder="请输入备注信息(选填)" v-model="remark"/>
		</view>
		<view class="submit_btn">
			<view>运费：{{dataInfo.pricePostage}}元；积分：	<text>{{totalPrice}}</text></view>
			<button @click="onSubmit">确认兑换</button>
		</view>
	</view>
</template>

<script>
import { setPayAssign } from '@/config/utils';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			remark:"",
			objId:"",
			dataInfo:{},
			goodsNum:1,
			goodsSpecId:"",
			totalPrice:0
		};
	},
	computed: {
		...mapState(['preOrderData','checkedAddressData'])
	},
	//第一次加载
	onLoad(e) {
		if(e.objId){
			this.objId = e.objId;
		}
		if(e.goodsNum){
			this.goodsNum = e.goodsNum;
		}
		if(e.goodsSpecId){
			this.goodsSpecId = e.goodsSpecId;
		}
		this.pageData();
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		...mapMutations(['setCheckedAddressData']),
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		//页面数据
		pageData() {
			this.$http.get('api/mime/address/v1/get_default').then(res => {
				this.setCheckedAddressData(res || {});
			});
			this.$http
				.get('api/shop_integral/v1/info', {
					objId: this.objId
				})
				.then(res => {
					res.goodsSpecBO.forEach(item => {
						if(item.objId == this.goodsSpecId){
							res.goodsSpecName = item.name;
							res.goodsSpecIntegral = item.integral;
							this.totalPrice = item.integral * this.goodsNum;
						}
					});
					this.dataInfo = res;
				});
		},
		onSubmit(){
			if(!this.checkedAddressData.objId){
				uni.showToast({
					title:"请选择收货地址",
					icon:"none"
				});
				return;
			}
			let httpData = {
				addressId:this.checkedAddressData.objId,
				goods:[
					{
						goodsId:this.objId,
						goodsSpecId:this.goodsSpecId,
						goodsNum:this.goodsNum,
					}
				]
			};
			if(this.remark){
				httpData.remark = this.remark;
			}
			this.$http.post('api/order/mall/v1/submit_integral', httpData).then(res => {
				if(res.price > 0){
					//支付
					setPayAssign(res,data => {
						let content = "支付成功！"
						if(!data.success){
							content = "支付失败！"
						}
						uni.showModal({
							title:"支付提示",
							content:content,
							showCancel:false,
							success: (res) => {
								uni.switchTab({
									url:"/pages/my/my"
								});
							}
						})
					});
				}else{
					uni.showModal({
						title:"提示",
						content:"兑换成功！",
						showCancel:false,
						success: () => {
							uni.redirectTo({
								url:'../my/order/orderList'
							})
						}
					})
				}
			});
		}
	},
	//页面隐藏
	onHide() {}, 
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.order_info {
	margin: 30rpx 30rpx 10rpx 30rpx;
	padding: 0rpx 30rpx;
	background: #ffffff;
	border-radius: 8rpx;
	position: relative;
	&:before {
		content: '';
		background-image: url('../../static/icon/bg_colour.png');
		position: absolute;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;
		right: 0;
		left: 0;
		top: 0;
		height: 6rpx;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}
	.order_infoaddress {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #f7f7f7;
		> view {
			color: #555555;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 39rpx 0rpx;
			> view {
				font-size: 24rpx;
				padding-bottom: 8rpx;
			}
			> text {
				font-size: 28rpx;
			}
		}
		> image {
			width: 14rpx;
			height: 24rpx;
		}
	}
	.order_customer_info {
		font-size: 24rpx;
		color: #555555;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0rpx;
	}
}
.product_info{
	margin: 20rpx 30rpx;
	border-radius: 8rpx;
	padding: 30rpx;
	display: flex;
	background: #FFFFFF;
	justify-content: space-between;
	>image{
		border-radius: 4rpx;
		width: 160rpx;
		height: 160rpx;
	}
	>view{
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		.name{
			font-size: 28rpx;
			color: #333435;
			padding-bottom: 10rpx;
		}
		.setmeal{
			font-size: 24rpx;
			color: #cccccc;
			padding-bottom: 32rpx;
		}
		.price_info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>text{
					color: #ff403f;
					font-size: 28rpx;
					margin-right: 15rpx;
				}
				>view{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0rpx 6rpx;
					font-size: 24rpx;
					color: $themeColor;
					border: 1rpx solid $themeColor;
					border-radius: 4rpx;
				}
			}
			>view{
				font-size: 24rpx;
				color: #555555;
			}
		}
	}
}
.remarks_info{
	border-radius: 8rpx;
	padding: 30rpx;
	margin: 10rpx 30rpx;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	>text{
		padding-bottom: 20rpx;
		font-size: 28rpx;
		color: #333333;
	}
	>textarea{
		height: 150rpx;
		font-size: 28rpx;
		color: #cccccc;
	}
}
.submit_btn{
	width: 100%;
	height: 98rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	background: #FFFFFF;
	border: solid 1rpx #f7f7f7;
	bottom: 0;
	>view{
		font-size: 24rpx;
		color: #333333;
		padding-left: 30rpx;
		>text{
			font-size: 32rpx;
			color: #ff5554;
		}
	}
	>button{
		width: 280rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 0rpx;
		@include  theme('gradient_bg')
	}
}



</style>
